<template>
  <el-card v-show="showTimeInfo" v-if="contestModel!=null">
    <div class="contest-left-time">
      您的比赛时间：{{ frontTime | showTime }} --- {{ backTime|showTime }}
    </div>
    <el-button style="float: right;" type="info" @click="endContest">结束考试</el-button>
  </el-card>
</template>

<script>

import {endContest} from "@/network/contest";

export default {
  name: "ContestTabBar",
  props: {
    contestModel: {
      type: Object,
      default() {
        return null;
      }
    }
  },
  methods: {
    endContest() {
      endContest(this.contestModel.contestId).then(res => {
        this.$message.success("考试已结束");
      })
    }
  },
  computed: {
    //实际的开始时间
    frontTime() {
      return Math.max(this.contestModel.startTime, this.contestModel.openTime);
    },
    //实际的结束时间
    backTime() {
      //todo 暂时设置为2个小时
      let result = this.contestModel.endTime;
      if (this.contestModel.closeTime !== null && this.contestModel.closeTime < result) {
        result = this.contestModel.closeTime;
      }
      if (this.contestModel.openTime !== null && this.contestModel.openTime + 2 * 60 * 60 * 1000 < result) {
        result = this.contestModel.openTime + 2 * 60 * 60 * 1000;
      }
      return result;
    },
    showTimeInfo() {
      let time = (new Date()).getTime();
      return time <= this.backTime;

    }
  }
}
</script>

<style scoped>
.contest-left-time {
  width: 100%;
  text-align: center;
  margin: 4px;
}
</style>